import React, { useRef } from 'react';
import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
import {
  Button,
  Tag,
  Space,
  Menu,
  Dropdown,
  message,
  Popconfirm,
  Breadcrumb,
} from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';
import { useRequest, Link, history } from 'umi';

import request from 'umi-request';

export default () => {
  const actionRef = useRef<ActionType>();
  const columns = [
    {
      title: '看板名称',
      dataIndex: 'name',
      // copyable: true,
      // ellipsis: true,
      // width: 600,
    },
    {
      // disable: true,
      title: '主题',
      dataIndex: 'theme',
      filters: true,
      onFilter: true,
      valueType: 'select',
      width: 150,
      valueEnum: {
        论文: {
          text: '论文',
          color: 'pink',
        },
        专利: {
          text: '专利',
          color: 'red',
        },
        项目: {
          text: '项目',
          color: 'yellow',
        },
        成果: {
          text: '成果',
          color: 'orange',
        },
        著作: {
          text: '著作',
          color: 'cyan',
        },
        实验平台: {
          text: '实验平台',
          color: 'green',
        },
        合作交流: {
          text: '合作交流',
          color: 'blue',
        },
        社会服务: {
          text: '社会服务',
          color: 'purple',
        },
        人才培养: {
          text: '人才培养',
          color: 'geekblue',
        },
      },
    },
    {
      title: '创建人',
      dataIndex: 'createUser',
      key: 'createUser',
      hideInSearch: true,
      // width: 150,
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      // sorter: true,
      hideInSearch: true,
      sorter: {
        compare: (a: { createTime: string }, b: { createTime: string }) =>
          b.createTime.localeCompare(a.createTime),
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text, record, _, action) => [
        <Link to={'/DataBoard/CreateBoard/' + record.id} key="view">
          查看
        </Link>,
        <Popconfirm
          key={'2'}
          title="确定删除吗？"
          onConfirm={() => {
            deleteBoard.run(record.id).then(() => {
              getAllBoard.run();
            });
          }}
          onCancel={() => {
            message.error('已取消');
          }}
          okText="确定"
          cancelText="取消"
        >
          <a href="#">删除</a>
        </Popconfirm>,
      ],
    },
  ];
  //获取全部看板的请求
  const getAllBoard = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/getAllBoard',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );

  //删除看板的请求
  const deleteBoard = useRequest(
    (boardId) => {
      return {
        url: `http://10.1.40.84:9993/deleteBoard?boardId=${boardId}`,
        method: 'GET',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
      };
    },
    {
      onSuccess: (result, params) => {
        if (result) {
          message.success('删除成功！');
        } else {
          message.error('单表使用中，禁止删除！');
        }
      },
      onError: (e, params) => {
        console.log(e);
        console.log(params);
      },
      manual: true,
    },
  );
  return (
    <PageContainer
      header={{
        title: ' ',
        breadcrumb: (
          <Breadcrumb>
            <Breadcrumb.Item>数据导出</Breadcrumb.Item>
            <Breadcrumb.Item>数据看板</Breadcrumb.Item>
          </Breadcrumb>
        ),
      }}
    >
      <ProTable
        columns={columns}
        actionRef={actionRef}
        cardBordered
        dataSource={getAllBoard.data}
        request={async (params) => {
          var temp: any;
          await getAllBoard.run(params).then((data) => {
            temp = data;
          });
          return {
            data: temp,
            success: true,
          };
        }}
        pagination={{
          pageSize: 10,
        }}
        rowKey="id"
        dateFormatter="string"
        headerTitle="看板列表"
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            type="primary"
            onClick={() => history.push('/DataBoard/CreateBoard/new')}
          >
            新建看板
          </Button>,
        ]}
      />
    </PageContainer>
  );
};
